<template>
  <div class="text_list_box">
    <el-table
      :data="tableData"
      height="350"
      tooltip-effect="light"
      header-row-class-name="table_header_title"
    >
      <el-table-column width="60px" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-checkbox
              v-model="scope.row.isCheck"
              @change="chooseMaterial(scope.row)"
            ></el-checkbox>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="页面名称" align="'center'">
        <template #default="scope">
          <div class="line3">{{scope.row.page_name || '--'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="页面编号" align="'center'">
        <template #default="scope">
          <div class="line3">{{scope.row.external_page_id || '--'}}</div>
        </template>
      </el-table-column>

      <template slot="empty">
        <el-empty image="/static/noData.png" description="暂无数据"></el-empty>
      </template>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";

// const props = defineProps(["baseList"]);

interface PropsType {
  baseList?: any[],
  selectBaseList?: any[],
  remainNum?: (string | number),
  multiple?: boolean,
  totalNum: number
}
const props = withDefaults(defineProps<PropsType>(), {
  baseList: ()=>[],
  selectBaseList: ()=>[],
  remainNum: 0,
  multiple: true,
  totalNum: 9
})

const emit = defineEmits(["getData"]);
let textArr = reactive<any[]>([]);

const chooseMaterial = (item: any) => {
  let indx = props.selectBaseList.findIndex((it: any) => it.id === item.id);
  if(indx === -1){
    if (props.remainNum <= 0) {
      ElMessage.error(`最多可选${props.totalNum}个素材`);
      item.isCheck = false
      return
    }
  }
  let deleteItem = null
  if(props.multiple){
    if (indx === -1) {
      props.selectBaseList.push(item);
    } else {
      deleteItem = item
      props.selectBaseList.splice(indx, 1);
    }
  }else{
    if (indx === -1) {
      props.baseList.forEach(ite=>{
        ite.isCheck = false
      })
      item.isCheck = true
      props.selectBaseList.splice(0)
      props.selectBaseList.push(item)
    } else {
      item.isCheck = false
      props.selectBaseList.splice(0)
    }
  }

  emit("getData", {
      deleteItem,
      id: '99',
      type: 8,
      typeStr: "pages",
      data: props.selectBaseList
    });
};


const tableData = computed(() => {
  let arr: any[] = [];
  textArr=[];
  if (props.baseList?.length) {
    props.baseList.forEach((item: any) => {
      item.isCheck = !!item.isCheck;
      arr.push(item);
    });
  }
  return arr;
  // return [];
});

onMounted(()=>{
  if(props.selectBaseList.length){
    emit('getData', {
      deleteItem: null,
      id: '99',
      type: 8,
      typeStr: "pages",
      data: props.selectBaseList
    })
  }
})

</script>

<style lang="scss" scoped>
.text_list_box {
  width: 100%;
  .line3{
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-break: break-all;  
  }
}
</style>
<style lang="scss">
.text_list_box {
  .el-table--scrollable-y ::-webkit-scrollbar {
    display: none;
  }
  .table_header_title {
    th.el-table__cell {
      background: #f9f9f9;
      padding: 10px 0;
    }
  }
}
</style>
